<template>
    <header id="header">
            <div class="mui-container-fluid">
                <div class="header__clientLogo">
                    <img src="http://www.sorbonne-university.com/typo3conf/ext/sorbonne_layout/Resources/Public/images/content/communs/logo-sorbonne.png">
                </div>

                <div class="right icon-menu">
                    <div class="header__icon">
                        <button class="header__btn">
                            <i v-html="searchIcon"></i>
                        </button>
                    </div>
                    <div class="header__icon">
                        <button class="header__btn">
                            <i v-html="timeIcon"></i>
                        </button>
                    </div>
                    <div class="header__icon">
                        <button class="header__btn">
                            <i v-html="favoriteIcon"></i>
                        </button>
                    </div>
                    <div class="header__icon">
                        <button class="header__btn header__btn--add">
                            <i v-html="addIcon"></i>
                        </button>
                    </div>
                    <div class="userProfile">
                        <button class="userProfile__button">
                            <img src="../../assets/img/user-profile.png" alt="">
                        </button>
                        <div class="userProfile__notificationCount">10</div>
                    </div>

                </div>
            </div>

    </header>
</template>

<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                searchIcon: require('../../assets/img/search-icon.svg'),
                timeIcon: require('../../assets/img/time-tracking-icon.svg'),
                favoriteIcon: require('../../assets/img/favorite-icon.svg'),
                addIcon: require('../../assets/img/add-icon.svg')
            }
        },
        mounted: function() {
            var self = this;
        },
        methods: {
            showSidedrawer: function(){
                var  sidedrawerEl = $('#sidedrawer')

                var options = {
                    onclose: function() {
                        sidedrawerEl
                            .removeClass('active')
                            .appendTo(document.body);
                    }
                };

                var $overlayEl = $(mui.overlay('on', options));

                // show element
                sidedrawerEl.appendTo($overlayEl);
                setTimeout(function() {
                    sidedrawerEl.addClass('active');
                }, 20);
            },
            hideSidedrawer: function(){
                $('body').toggleClass('hide-sidedrawer');
            }
        }
    }
</script>